<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-row :gutter="10">
      <!-- 添加权限 -->
        <el-col :span="2">
          <el-button type="primary" @click="addDialogFormVisible = true">添加权限</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="authRuleList" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="节点名称" sortable></el-table-column>
        <el-table-column prop="id" label="id" sortable ></el-table-column>
        <el-table-column prop="path" label="节点url" sortable></el-table-column>
        <el-table-column prop="type" label="节点类型" sortable>
          <template slot-scope="scope">
            <el-tag type="primary" size="mini" v-if="scope.row.type == 1">菜单</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type == 2">操作</el-tag>
            <el-tag type="warning" size="mini" v-else>方法</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="图标" sortable></el-table-column>
        <el-table-column  label="状态" sortable>
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.status == 0">禁用</el-tag>
            <el-tag type="success" size="mini" v-else>启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editAuthRule(scope.row.id)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delAuthRule(scope.row.id, scope.row.name)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加权限 -->
      <el-dialog title="添加权限节点" :visible.sync="addDialogFormVisible" width="30%" @close="addHandleClose">
        <el-form :model="addForm" label-width="80px" ref="addFormRef" :rules="addFormRules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="节点地址" prop="path">
            <el-input v-model="addForm.path"></el-input>
          </el-form-item>
          <el-form-item label="父级节点" prop="pid">
              <!-- clear点击清空的实现  ref属性注册，用于操作dom元素-->
              <el-select v-model="chooseName" placeholder="请选择" clearable @clear="handleClear" ref="selectUpResId">
                <el-option hidden :key="addForm.pid" value="一级菜单" :label="chooseName"></el-option>
                <!-- data数据， props配置选项 expand-on-click-node是否在点击节点的时候展开或者收缩节点  check-on-click-node是否在点击节点的时候选中节点 node-click节点被点击时的回调-->
                <el-tree
                  :data="authRuleMenu"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClick"
                  :default-expand-all="true"
                >
                </el-tree>
              </el-select>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="addForm.icon" ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <template>
              <el-radio v-model="addForm.type" label="1">菜单</el-radio>
              <el-radio v-model="addForm.type" label="2">操作</el-radio>
              <el-radio v-model="addForm.type" label="3">方法</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <template>
              <el-radio v-model="addForm.status" label="1">启用</el-radio>
              <el-radio v-model="addForm.status" label="0">禁用</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false" >取 消</el-button>
          <el-button type="primary" @click="addFormData">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 编辑权限节点 -->
      <el-dialog title="编辑权限节点" :visible.sync="editDialogFormVisible" width="30%" @close="editHandleClose">
        <el-form :model="editForm" label-width="80px" ref="editFormRef" :rules="editFormRules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="节点地址" prop="path">
            <el-input v-model="editForm.path"></el-input>
          </el-form-item>
          <el-form-item label="父级节点" prop="pid">
            <!-- clear点击清空的实现  ref属性注册，用于操作dom元素-->
            <el-select v-model="editForm.pidName" placeholder="根节点" clearable @clear="editHandleClear" ref="editSelectUpResId">
              <el-option hidden :key="editForm.pid" value="根节点" :label="editForm.pidName"></el-option>
              <!-- data数据， props配置选项 expand-on-click-node是否在点击节点的时候展开或者收缩节点  check-on-click-node是否在点击节点的时候选中节点 node-click节点被点击时的回调-->
              <el-tree
                :data="authRuleMenu"
                :props="defaultProps"
                :expand-on-click-node="false"
                :check-on-click-node="true"
                @node-click="editHandleNodeClick"
                :default-expand-all="true"
              >
              </el-tree>
            </el-select>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="editForm.icon" ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <template>
              <el-radio v-model="editForm.type" :label="1">菜单</el-radio>
              <el-radio v-model="editForm.type" :label="2">操作</el-radio>
              <el-radio v-model="editForm.type" :label="3">方法</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <template>
              <el-radio v-model="editForm.status" :label="1">启用</el-radio>
              <el-radio v-model="editForm.status" :label="0">禁用</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false" >取 消</el-button>
          <el-button type="primary" @click="saveAuthRule">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 测试数据
      data: [{
        id: 1,
        name: '一级 1',
        children: [{
          id: 11,
          name: '二级 1-1',
          children: [{
            id: 111,
            name: '三级 1-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 权限列表
      authRuleList: [],
      // 权限菜单
      authRuleMenu: [],
      // 下拉框选中节点名称
      chooseId: '',
      chooseName: '根节点',
      addDialogFormVisible: false,
      addForm: {
        name: '',
        path: '',
        pid: '0',
        type: '1',
        icon: '',
        status: '1'
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入节点路径', trigger: 'blur' }
        ]
      },
      editForm: [],
      editDialogFormVisible: false,
      editFormRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入节点路径', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.authRuleLists()
  },
  methods: {
    // 权限列表
    async authRuleLists () {
      const { data: res } = await this.$http.get(this.GLOBAL.authRuleList)
      if (res.status !== 200) return this.$message.error(res.info)
      this.authRuleList = res.data.authRuleList
      this.authRuleMenu = res.data.authRuleMenu
    },
    // 节点点击事件
    handleNodeClick(data) {
      // 配置树形组件点击节点后，设置选择器的值，配置组件的数据
      this.chooseName = data.name
      this.addForm.pid = data.id
      // 选择器执行完成后，使其失去焦点隐藏下拉框效果
      this.$refs.selectUpResId.blur()
      // console.log(this.data)
    },
    // 选择器配置可以清空选项，用户点击清空按钮触发
    handleClear () {
      // 将选择器的值置空
      this.chooseName = '根节点'
      this.addForm.pid = '0'
    },
    // 关闭添加框
    addHandleClose () {
      // 隐藏弹出框
      this.addDialogFormVisible = false
      // 重置表单
      this.$refs.addFormRef.resetFields()
      // 清空选择器
      this.handleClear()
    },
    // 提交数据
    addFormData () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('验证未通过')
        }
        const { data: res } = await this.$http.post(this.GLOBAL.addAuthRule, this.addForm)
        if (res.status !== 200) return this.$message.error(res.info)
        this.$message.success(res.info)
        // 关闭对话框
        this.addHandleClose()
        this.authRuleLists()
      })
    },
    // 节点点击事件
    editHandleNodeClick(data) {
      // 配置树形组件点击节点后，设置选择器的值，配置组件的数据
      this.editForm.pidName = data.name
      this.editForm.pid = data.id
      // 选择器执行完成后，使其失去焦点隐藏下拉框效果
      this.$refs.editSelectUpResId.blur()
      // console.log(this.data)
    },
    // 选择器配置可以清空选项，用户点击清空按钮触发
    editHandleClear () {
      // 将选择器的值置空
      this.editForm.pidName = '根节点'
      this.editForm.pid = '0'
    },
    // 关闭编辑框
    editHandleClose () {
      // 隐藏弹出框
      this.editDialogFormVisible = false
      // 重置表单
      this.$refs.editFormRef.resetFields()
      // 清空选择器
      this.editHandleClear()
    },
    // 获取编辑信息
    async editAuthRule (id) {
      const { data: res } = await this.$http.get(this.GLOBAL.getAuthRule, {
        params: { id: id }
      })
      if (res.status !== 200) return this.$message.error(res.info)
      this.editForm = res.data.authRuleInfo
      // 显示编辑框
      this.editDialogFormVisible = true
    },
    // 保持编辑信息
    saveAuthRule () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return this.$message.error('验证失败')
        const { data: res } = await this.$http.post(this.GLOBAL.saveAuthRule, this.editForm)
        if (res.status !== 200) return this.$message.error(res.info)
        this.$message.success(res.info)
        this.editHandleClose()
      })
    },
    // 删除节点
    async delAuthRule (id, name) {
      if (!id) return this.$message.warning('参数不能为空111')
      const confirmResult = await this.$confirm('此操作将永久删除 【' + name + '】 节点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {})
      if (confirmResult !== 'confirm') return this.$message.warning('取消删除节点')
      // 进行删除操作
      const { data: res } = await this.$http.post(this.GLOBAL.delAuthRule, { id: id })
      if (res.status !== 200) return this.$message.error(res.info)
      this.$message.success(res.info)
      // 更新表单
      this.authRuleLists()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
